<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/shopping.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
<body>
    <header>
            <div class="h_top">
                <div class="main h_main">
                    <span class="iconfont icon-ziyuan"></span><span class="h_span1"><span>送货地址：</span><span class="h_city">上海</span><i class="iconfont icon-xiala xiala1"></i></span>
                    <ul class="ul1">
                        <li><a href="" class="h_a1"style="color:#000;">HI,18835513886</a></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="" class="h_a2" id="ul1_a2">个人中心 <i class="iconfont icon-xiala xiala2"></i></a></li>
                        <li><a href="" class="h_a1" id="ul1_a1">手机服务</a></li>
                    </ul>
                </div>
            </div>

            <div class="h_nav">
                <div class="main h_main">
                    <img src="./img/logo.png" alt="">
                    <span class="gouwu">购物车</span>
                    <div class="nav_cen">
                        <input type="text" placeholder="输入关键词" class="nav_input"><span>搜索</span>
                    </div>   
                    <div class="main h_main h_mainBox">
                        <div class="box1">
                            <ul class="box1_ul1">
                                <li>A 安徽省  澳门特别行政区</li>
                                <li>B 北京</li>
                                <li>C 重庆</li>
                                <li>D 钓鱼岛</li>
                                <li>F 福建省</li>
                                <li>G 广东省 广西壮族自治区 贵州省 甘肃省</li>
                                <li>H 河北省 黑龙江省 河南省 湖北省 湖南省 海南省</li>
                            </ul>
                            <ul class="box1_ul2">
                                <li>J 江苏省 吉林省 江西省</li>
                                <li>L  辽宁省</li>
                                <li>N 内蒙古自治区 宁夏回族自治区</li>
                                <li>Q 青海省</li>
                                <li>S 山西省 上海 陕西省 山东省 四川省</li>
                                <li>T 天津 台湾</li>
                                <li>X 西藏自治区 新疆维吾尔自治区 香港特别行政区</li>
                                <li>Y 云南省</li>
                                <li>Z 浙江</li>
            
                            </ul>
                        </div>
                        <div class="box2">
                            <ul>
                                <li>待处理订单</li>
                                <li>消息</li>
                                <li>我的收藏</li>
                                <li>我的问答</li>
                                <li>我的消费券</li>
                                <li>售后服务</li>
                            </ul>
                        </div>
                        <div class="box3">
                            <h6>欧普照明商城</h6>
                            <img src="./img/QR_code.png" alt="">
                        </div>
                    </div>           
                </div>
                
            </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
    <article>
        <div class="main">
            <div class="cart-title">
                <h2>全部商品</h2>
                <div class="cart-address">
                    <dt class="ng1">送货至：</dt>
                    <dd class="ng2">
                        <a href="" >河北省邯郸市复兴区<i class="icon-more-down"></i></a>
                    </dd>
                </div>
            </div>
            <div class="cart-table">
                <div class="account-c">
                    <ul>
                        <li><input type="checkbox" class="check1">全选</li>
                        <li>商品信息</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>小计</li>
                        <li>操作</li>
                        
                    </ul>
                    <p class="p1">
                        <input type="checkbox" class="check2">
                        <img src="./img/fy1.jpg" alt="" class="float_left">
                        <span class="xinxi">【新品】几何线性装饰吊灯 新潮装饰客厅灯 星宇</span>
                        <span class="price">￥<span class="pre">998.00</span></span>
                        <span class="count"><button class="jian">-</button><span class="count1">1</span><button class="jia">+</button></span>
                        <span class="xiaoji">￥<span class="xji">998.00</span></span>
                        <span class="caozuo"><button class="delete">删除</button></span>
                        <div class="mask">
                            <h2>确认删除么？</h2>
                            <div class="btnd"><button id="btn1">确认</button>
                                <button id="btn2">取消</button></div>
                        </div>
                    </p>
                    <!-- <p class="p1">
                        <input type="checkbox" class="check2">
                        <img src="./img/fy3.jpg" alt="" class="float_left">
                        <span class="xinxi">吊扇灯风扇灯客厅餐厅卧室简约家用带LED风扇欧式吊灯</span>
                        <span class="price">￥<span class="pre">1098.00</span></span>
                        <span class="count"><button class="jian">-</button><span class="count1">1</span><button class="jia">+</button></span>
                        <span class="xiaoji">￥<span class="xji">1098.00</span></span>
                        <span class="caozuo"><button class="delete">删除</button></span>
                    </p> -->
                </div>
                <div class="account-b">
                    <div class="commodity"><span class="cou1">1</span>件商品</div>
                    <div class="commodity-total">
                        <span>商品总价：￥</span><span class="totalprice">998.00</span>
                    </div>
                    <a href="http://127.0.0.1:56/jiesuan.html" class="sumit">提交订单</a>
                </div>
            </div>
           
        </div>
          
    </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        let prices=Number($(".pre").html())
        let n=$(".count1").html()
        $('.check1').on('click',function(){
            if(this.checked) {
                $(".check2").attr('checked',true);
            }else {
                $(".check2").attr('checked',false);
            }
        });
        $(".jia").click(function(){
            if(n<100){n++;}
            $(this).prev().html(n)
            $(".xji").html(n*prices+".00")
            $(".totalprice").html(n*prices+".00")
        })
        
        $(".jian").click(function(){
            if(n>1){
                n--;
            }  
            $(this).next().html(n)
            $(".xji").html(n*prices+".00")
            $(".totalprice").html(n*prices+".00")
        })
        
        // $(".xji").html(n*prices+".00")
        $(".delete").click(function(){
            let tis=$(this)
            $(".mask").show()
            $("#btn1").click(function(){
                 tis.closest(".p1").remove()
                 $(".mask").hide()
                 $(".totalprice").html(0.00)
                 $(".cou1").html(0)
            })
            $("#btn2").click(function(){
                $(".mask").hide()
            })
           
        })















        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })
    </script>
</body>
</html>